<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>会员登录</title>

    <style>
        *{
            box-sizing:border-box;
        }
        html,body{
            margin:0;
            padding:0;
        }
        a{
            text-decoration:none;
            color:black;
        }
        a:hover{
            text-decoration: underline;
        }
        .header{
            width:980px;
            margin:0 auto;
        }
        .log{
            width:980px;
            margin:0 auto;
        }
        .log_l{
            float:left;
            width:640px;
        }
        .log .log_r{
            padding: 0;
            margin: 0;
            float:left;
            width:340px;
            height:480px;
            border:1px solid lightgray;
        }
        .log_form input{
            width:200px;
            height: 30px;
            border-radius: 5px;
            padding-left: 10px;
        }
        .check{
            padding-left: 85px;
        }
        .check input{
            margin-top: 30px;
            /*width:25px;*/
            /*height: 25px;*/
        }
        .log .log_r .log_form{
            width:340px;
            height:40px;
            margin-top: 10px;
            padding: 20px;
            line-height:30px;
        }
        .log .log_r .log_form label{
            width:30px;
            height:30px;
            line-height:30px;
        }
        .log .log_r .log_form input{
            font-size:16px;
            border:1px solid #ABABAB;
        }
        .bottom{
            width: 318px;
            height: 58px;
            margin:30px 10px 10px;
            font-size: 14px;
            border-top:1px solid lightgrey ;
            line-height: 20px;
            padding:20px 5px 0;
        }
        .login_support{
            margin: 10px 18px;
        }
        h4{
            width: 302px;
            height: 32px;
            padding: 8px 5px;
            background: #efefef;
            margin: 0;
        }
        .footer{
            margin-top: 20px;
            text-align:center;
            font-size: 14px;
        }
        p{
            width:302px;
            height: 60px;
            margin: 0;
            border: 1px solid lightgrey;
        }
        p a{
            display:inline-block;
            padding: 5px;
            text-align: center;
            width: 94px;
            height: 25px;
        }
        ul li{
            float: left;
            list-style: none;
            width: 33.33%;
            line-height: 30px;
            text-align: center;
            border: 1px solid lightgray;
            border-right: 0;
        }
        .show{
            border-top:2px solid red;
            border-bottom: none;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <div>
            <a href="http://www.banggo.com">
                <img src="https://passport.banggo.com/CASServer/themes/banggo/images/banggo/logo.jpg">
            </a>
        </div>
    </div>
    <div class="log">
        <div class="log_l">
            <a href=""><img src="https://passport.banggo.com/CASServer/themes/banggo/images/banggo/login_banner.jpg"></a>
        </div>
        <div class="log_r">
            <ul style="margin: 0;height: 30px;padding: 0">
                <li class="show">帐号登录</li>
                <li>手机登录</li>
                <li>卡登录</li>
            </ul>
            <div style="clear: both"></div>
            <form  method="POST">
                <!--用户名-->
                <div class="log_form">
                    <label>用户名：</label>
                    <input type="text" name="petname" placeholder="请填写用户名" pattern="\w|[^x00-xff]|@)?){6,20}" required>
                </div>
                <!--密码-->
                <div class="log_form">
                    <label>密&emsp;码：</label>
                    <input type="password" class="form-control" name="password" placeholder="请填写密码" pattern="^.{6,12}$"  required>
                </div>
                <!--验证码-->
                <div class="log_form">
                    <label>验证码：</label>
                    <input type="text" name="验证" placeholder="请填写验证码" >
                </div>
                <div class="check">
                    <input type="radio" value="1" name="select" />
                    <label for="">记住用户名</label>
                    <input type="radio" value="2" name="select" />
                    <label for="">自动登录</label>
                </div>
                <div class="log_form " style="margin-left: 80px; ">
                    <input type="submit" value="登录" name="" style="background: red;width:100px;border-radius: 5px ">
                    <a href="">忘记密码?</a>
                </div>
            </form>
            <div class="bottom">
                <span>还不是帮购网用户?马上加入吧...</span>
                <a href="reg.html"><button>免费注册>></button></a>
            </div>
            <div class="login_support">
                <h4>或者使用合作网站登录:</h4>
                <p>
                    <a href="" class="icon_qq">QQ</a>
                    <a href="" class="">支付宝</a>
                    <a href="" class="">新浪微博</a>
                    <a href="" class="">微信</a>
                    <a href="" class="">人人网</a>
                    <a href=""></a>
                </p>


            </div>
    </div>
    <div style="clear: both"></div>
    <div class="footer">
        <span>美特斯邦威集团网站：</span>
        <a href="http://www.metersbonwe.com/">美特斯邦威</a> |
        <a href="http://www.me-city.com/">ME&CITY</a> |
        <a href="http://www.chincn.com/">CH'IN祺</a> |
        <a href="http://www.banggo.com">邦购网</a>
    </div>
</div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="script/login.js"></script>
<script src="script/index1.js"></script>